<template>
	<h3>ActionDemo</h3>
	count {{ count }} salary {{ salary }}
	<br />
	<button @click="$store.dispatch('increment')">dispatch</button>
	<button @click="$store.dispatch('incrementAsync')">dispatchAsync</button>
	<button @click="incrementAsync">dispatchAsync 10</button>
	<hr />
	cart {{ cart }}
	<br />
	<button @click="checkout">checkout</button>
	<hr />
	<button @click="increment">increment</button>
	<button @click="incrementAsync({ amount: 1 })">incrementAsync</button>
	<button @click="add">add</button>
	<hr />
	data: {{ data }} <br />
	otherData: {{ otherData }} <br />
	<button @click="execute">actionB</button>
</template>

<script>
	import { mapState, mapGetters, mapActions } from "vuex";
	export default {
		computed: {
			...mapState(["count", "cart", "salary", "data", "otherData"]),
			...mapGetters(["checkedProducts"]),
		},
		methods: {
			incrementAsync() {
				// 以载荷形式分发
				// store.dispatch("incrementAsync", {
				// 	amount: 10,
				// });

				// 以对象形式分发
				this.$store.dispatch({
					type: "incrementAsync",
					amount: 10,
				});
			},

			checkout() {
				this.$store.dispatch({
					type: "checkout",
					products: this.checkedProducts,
				});
			},

			execute() {
				try {
					this.$store.dispatch("actionB");
				} catch (error) {
					console.error("error=", error);
				}
			},

			...mapActions([
				"increment", // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

				// `mapActions` 也支持载荷：
				"incrementAsync", // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
			]),

			...mapActions({
				add: "increment", // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
				// execute: "actionB",
			}),
		},
	};
</script>

<style>
</style>